<template>
    <div class="login" :class="{ active: uselogin.isLogin }">
        <van-nav-bar title="豆果美食" left-text="返回" left-arrow right-text="注册" @click-left="back" @click-right="toResigter" />
        <div class="logo">
            <img src="../assets/logo.jpg" alt="">
        </div>
        <van-form @submit="login">
            <van-cell-group inset>
                <van-field :required="true" v-model="userinfo.phone" name="phone" label="手机号" placeholder="输入手机号" :rules="[{ required: true, message: '请填写手机号' }, {
                    pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误'
                }]" autocomplete="off" />
                <van-field :required="true" v-model="userinfo.password" :type="isDisplay ? undefined : 'password'"
                    name="password" label="密码" placeholder="输入密码" :right-icon="isDisplay ? 'eye-o' : 'closed-eye'"
                    @click-right-icon="show" :rules="[
                        { required: true, message: '请填写密码' },
                        , {
                            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码格式错误'
                        }
                    ]" autocomplete="off" />
            </van-cell-group>
            <div class="forget">
                <span>登录遇到问题?</span>
                <span>忘记密码?</span>
            </div>
            <div style="margin: 16px;">
                <van-button round block color="#f9c653" native-type="submit">
                    登录
                </van-button>
            </div>
            <div class="tips">
                <p>温馨提示:</p>
                <p>1.手机号为11位数的数字</p>
                <p>2.密码限制在6~20位之间，必须包含字母和数字</p>
            </div>
        </van-form>
        <Register></Register>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useLogin, useRegister, useLogining } from "../stores/index"
import Register from './Register.vue';
import { showToast } from 'vant';
let userinfo: any = reactive<Object>({
    phone: "",
    password: ""
});
let uselogin: any = useLogin()
let useregister: any = useRegister()
let uselogining: any = useLogining()
let isDisplay: any = ref<boolean>(false)
let back: () => void = (): void => {
    uselogin.updateLogin(false)
}
//进入注册页面
let toResigter: () => void = (): void => {
    useregister.updateRegister(true)
}
//显示密码
let show: () => void = (): void => {
    isDisplay.value = !isDisplay.value
}
//登录
let login: () => void = (): void => {
    let userinfoData: any = localStorage.getItem("userinfoData")
    if (userinfoData) {
        userinfoData = JSON.parse(userinfoData)
    } else {
        userinfoData = []
    }
    let isHas: boolean = false
    let password: string = ""
    //判断账号是否有
    for (let i: number = 0; i < userinfoData.length; i++) {
        if (userinfoData[i].phone === userinfo.phone) {
            isHas = true;
            password = userinfoData[i].password;
            break;
        }
    }
    //存在判断密码是否正确
    if (isHas) {
        if (userinfo.password === password) {
            showToast("登录成功");
            setTimeout((): void => {
                uselogin.updateLogin(false);
                uselogining.updateLogining(1)
                uselogining.updateuserinfoData(userinfoData)
                localStorage.setItem("isLogin", JSON.stringify(uselogining.isLogining));
                localStorage.setItem("userinfoData", JSON.stringify(uselogining.userinfoData));
            },1500)
        } else {
            showToast("密码错误!")
        }
    } else {
        showToast("该账号未注册!")
    }
}
</script>

<style scoped lang="scss">
.login {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    background: #fff;
    z-index: 999;
    transition: transform .5s;

    &.active {
        transform: translateX(0);
    }

    ::v-deep .van-nav-bar__text,
    ::v-deep .van-nav-bar .van-icon {
        color: #333;
        font-size: 16px;
    }

    ::v-deep .van-nav-bar__title {
        font-size: 18px;
    }

    .logo {
        width: 120px;
        margin: 50px auto;


        img {
            width: 100%;
            border-radius: 10px;
        }
    }

    .forget {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        font-size: 12px;
        color: #777;
    }

    .tips {
        padding: 10px 15px;
        color: #777;
    }
}</style>